<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="属性类型">
                <el-select v-model="attrOptionValue" placeholder="请选择">
                    <el-option
                            v-for="item in attrOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品规格">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix card-header-wrapper">
                        <span>颜色</span>
                        <el-button size="mini" icon="el-icon-plus" type="primary" style="margin-left: 50px;" plain>添加
                        </el-button>
                    </div>
                    <el-checkbox-group v-model="checkList">
                        <span>
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-button class="attr-handle-btn" type="text">删除</el-button>
                        </span>

                        <span>
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-button class="attr-handle-btn" type="text">删除</el-button>
                        </span>
                        <span>
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-button class="attr-handle-btn" type="text">删除</el-button>
                        </span>
                        <span>
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-button class="attr-handle-btn" type="text">删除</el-button>
                        </span>
                    </el-checkbox-group>
                </el-card>

                <el-card class="box-card" shadow="never" style="margin-top: 8px">
                    <div slot="header" class="clearfix card-header-wrapper">
                        <span>内存</span>
                        <el-button size="mini" icon="el-icon-plus" type="primary" style="margin-left: 50px;" plain>添加
                        </el-button>
                    </div>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="复选框 A"></el-checkbox>
                        <el-checkbox label="复选框 B"></el-checkbox>
                        <el-checkbox label="复选框 C"></el-checkbox>
                        <el-checkbox label="禁用" disabled></el-checkbox>
                        <el-checkbox label="选中且禁用" disabled></el-checkbox>
                    </el-checkbox-group>
                </el-card>
            </el-form-item>
            <el-form-item label="选择租期">
                <el-select v-model="attrOptionValue" placeholder="请选择">
                    <el-option
                            v-for="item in attrOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="sku配置">
                <el-table
                        :data="skuResult"
                        border
                        :span-method="objectSpanMethod"
                        style="width: 100%;">
                    <el-table-column
                            v-for="item in tableTitles"
                            :prop="item.key"
                            :label="item.label"
                            align="center"
                            width="180">
                        <template slot-scope="scope">
                            {{scope.row[item.prop]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="amount2"
                            label="租赁价格（元）">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="amount3"
                            label="库存">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="amount3"
                            label="库存预警值">
                    </el-table-column>

                    <el-table-column label="操作" min-width="150px" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" plain icon="el-icon-edit"
                                       type="primary">编辑
                            </el-button>
                            <el-button size="mini" plain icon="el-icon-delete"
                                       type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="toNext">下一步,关联商品</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import { Descartes2SKU } from 'descartes-sku.js'

  const obj = {}
  const args = [
    { value: ['红色'], key: 'color', label: '颜色' },
    { value: ['i5', 'i7', 'i3'], key: 'cpu', label: '处理器' },
    { value: ['年', '月', '日'], key: 'unit', label: '租赁周期' },
  ]
  const labelArr = []
  const argLength = []
  args.forEach(arg => {
    labelArr.push({ label: arg.label, prop: arg.key })
    obj[arg.key] = arg.value
    argLength.push(arg.value.length)
  })
  const descartes = new Descartes2SKU(obj)
  const result = descartes.descartes()

  export default {
    name: 'product-add-step3',
    data () {
      return {
        skuResult: result,
        tableTitles: labelArr,
        checkList: [],
        attr: {
          type: [],
          yys: []
        },
        attrOptions: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        attrOptionValue: ''
      }
    },
    created () {
      this.show()
    },
    methods: {
      show () {
        console.log(this.skuResult)
        console.log(this.tableTitles)
      },
      objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

        console.log(argLength.length)

        if (columnIndex < argLength.length - 1) {
          let tmp = [...argLength]
          tmp.splice(0, columnIndex + 1)
          let size = tmp.reduce((a, b) => a * b)
          if (rowIndex % size === 0) {
            return {
              rowspan: size,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      toNext () {
        this.$emit('next')
      }
    }
  }
</script>

<style>
    .el-card {
        background: #f8f9fc;
    }

    .el-card__header {
        padding: 5px 15px;
    }

    .attr-handle-btn {
        margin: 0 15px;
    }
</style>
